<template>
  <!-- #ifdef MP-WEIXIN -->
  <view class="container" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
  <!-- #endif -->
  <!-- #ifndef MP-WEIXIN -->
  <view class="container">
  <!-- #endif -->
    <!-- logo文字 -->
    <view class="logo-wrap">
      <!-- 左边区域开始 -->
      <view class="left">
        <image class="logo-image" src="@/static/images/index_logo.png" />
        <text class="logo-text">连接你我，沟通无界</text>
      </view>
      <!-- 左边区域结束 -->

      <!-- 右边区域开始 -->
      <view class="right">
        <i class="iconfont icon-tianjia" @click="showDropdownMenu"></i>

        <!-- 下拉菜单区域 -->
        <!-- #ifndef MP-WEIXIN -->
        <view class="dropdown-menu-box" v-if="isShowDropdownMenu">
          <i class="iconfont icon-sanjiaoxing"></i>
          <view class="dropdown-menu-item" v-for="(item, index) in menus" :key="index" @click="go(item.url)">
            <i :class="`iconfont icon-${item.icon}`"></i>
            <text class="name">{{ item.name }}</text>
          </view>

          <!-- #ifndef H5 -->
          <!-- 扫一扫区域开始 -->
          <view class="dropdown-menu-item" @click="handleScan">
            <i class="iconfont icon-saoyisao"></i>
            <text class="name">扫一扫</text>
          </view>
          <!-- #endif -->
        </view>
        <!-- #endif -->

        <!-- #ifdef MP-WEIXIN -->
        <view class="dropdown-menu-box" :style="{ top: dropdownMenuHeight + 'px' }" v-if="isShowDropdownMenu">
          <i class="iconfont icon-sanjiaoxing"></i>
          <view class="dropdown-menu-item" v-for="(item, index) in menus" :key="index" @click="go(item.url)">
            <i :class="`iconfont icon-${item.icon}`"></i>
            <text class="name">{{ item.name }}</text>
          </view>

          <!-- #ifndef H5 -->
          <!-- 扫一扫区域开始 -->
          <view class="dropdown-menu-item" @click="handleScan">
            <i class="iconfont icon-saoyisao"></i>
            <text class="name">扫一扫</text>
          </view>
          <!-- #endif -->
        </view>
        <!-- #endif -->
      </view>
      <!-- 右边区域结束 -->
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 获取屏幕边界到安全区域的距离,不同的机型距离顶部的高度不同
const { safeAreaInsets } = uni.getSystemInfoSync()

const dropdownMenuHeight = ref(safeAreaInsets?.top + 48)

// 菜单类型
type Menu = {
    icon: string
    name: string
    url: string
}

// 菜单
const menus = ref<Menu[]>([
  {
    icon: 'qunliao',
    name: '发起群聊',
    url: '/pagesGroup/start/index'
  },
  {
    icon: 'xinpengyou',
    name: '添加好友',
    url: '/pagesFriend/add/index'
  }
])

// 是否显示下拉菜单
const isShowDropdownMenu = ref(false)

// 显示下拉菜单
const showDropdownMenu = () => {
    isShowDropdownMenu.value = !isShowDropdownMenu.value
}

// 跳转
const go = (url: string) => {
  isShowDropdownMenu.value = false
  uni.navigateTo({url})
}

// 处理扫一扫功能
const handleScan = () => {
  uni.scanCode({
    // 扫码类型
    scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
    success: function (res) {
      console.log('条码类型：' + res.scanType);
      console.log('条码内容：' + res.result);
    }
  })
}
</script>

<style scoped lang="scss">
.container {
  background-color: $uni-color-primary;
  background-size: cover;
  display: flex;
  flex-direction: column;
  /* #ifdef MP-WEIXIN */
  padding-top: 20px;
  /* #endif */

  // logo文字
  .logo-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    padding: 0 15rpx;
    // 左边区域开始
    .left {
      .logo-image {
        width: 200rpx;
        height: 50rpx;
      }

      .logo-text {
        flex: 1;
        line-height: 24rpx;
        margin: 2rpx 0 0 0;
        padding-left: 10rpx;
        border-left: 1rpx solid #fff;
        font-size: 26rpx;
        color: #fff;
      }
    }
    // 左边区域结束

    // 右边区域开始
    .right {
      /* #ifdef MP-WEIXIN */
      margin-right: 220rpx;
      /* #endif */
      .icon-tianjia {
        font-size: 40rpx;
        color: #fff;
      }

      // 下拉菜单区域
      .dropdown-menu-box {
        width: 280rpx;
        background-color: #4C4C4C;
        position: absolute;
        top: 80rpx;
        right: 16rpx;
        /* #ifdef MP-WEIXIN */
        top: 120rpx;
        /* #endif */
        border-radius: 10rpx;
        z-index: 99;
        .icon-sanjiaoxing {
          position: absolute;
          top: -20rpx;
          right: 3rpx;
          /* #ifdef MP-WEIXIN */
          right: 220rpx;
          /* #endif */
          color: #4C4C4C;
        }
        .dropdown-menu-item {
          display: flex;
          padding: 25rpx 20rpx;
          border-bottom: 2rpx solid #585858;
          .iconfont {
            color: #fff;
            font-size: 40rpx;
            width: 40rpx;
          }

          &:last-child {
            border-bottom: none;
          }
          .name {
            flex: 1;
            display: flex;
            justify-content: flex-start;
            margin-left: 20rpx;
            color: #fff;
            padding-bottom: 10rpx;
          }
        }
      }
    }
  }
}
</style>